<template>
  <!-- <div style="display: flex; align-items: center; margin-bottom: 20px">
    <label style="width: 150px">参照物：</label>
    <el-select v-model="type" placeholder="请选择" @change="changeType">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
  </div> -->
  <el-form :model="form" label-width="auto" :inline="true">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="参照物：">
          <el-select v-model="form.referenceType" placeholder="请选择" @change="changeType">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="标注类型：">
          <el-select v-model="form.annotationType" placeholder="请选择" @change="changeType">
            <el-option v-for="item in annotationOptions" :key="item.value" :label="item.label" :value="item.value"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="线段类型：">
          <el-select v-model="form.lineType" placeholder="请选择" @change="changeType">
            <el-option v-for="item in lineTypeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="线宽：">
          <el-input-number v-model="form.lineWidth" :min="1">
          </el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="线段颜色：">
          <el-color-picker v-model="form.lineColor" show-alpha :predefine="predefineColors" />
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="文字颜色：">
          <el-color-picker v-model="form.fontColor" show-alpha :predefine="predefineColors" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="文字大小：">
          <el-input-number v-model="form.fontSize" :min="12" :precision="2" :step="0.1"></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script lang='ts' setup>
import { options, annotationOptions, lineTypeOptions } from './index.data';
import { reactive, ref, watch } from 'vue';
import { useSurveyDrawStore } from '../../store/surveyDraw'
const form = reactive({
  referenceType: 1.95,
  lineType: 'solid',
  annotationType: 'line',
  lineWidth: 2,
  lineColor: 'rgba(255, 69, 0, 1)',
  fontColor: 'rgba(255, 69, 0, 1)',
  fontSize: 16
})
const surveyDrawStore = useSurveyDrawStore()
watch(() => form, (newValue) => {
  surveyDrawStore.setFormValus(newValue)
}, {
  deep: true
})
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])
const type = ref('')
const emits = defineEmits(['changeType'])
const changeType = (value) => {
  emits('changeType', value)
}
</script>
<style lang='less' scoped>
/deep/ .el-form-item,
.el-input-number {
  width: 100%;
}
</style>